<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>查看场馆</title>
	<link rel="shortcut icon" href="../images/browserLOGO2.png" type="image/x-icon" />
	<meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/layer-animate.css"/> <!-- 弹窗组件 -->
    <link rel="stylesheet" href="../layui/css/layui.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!-- 弹窗组件 -->
	<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="../js/method.js"></script>
	
	<!-- 网页字体库 -->
	<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=devanagari,latin-ext"
	 rel="stylesheet">
	<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet">
	<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#map{height:500px;width:100%;}
		dl,dt,dd,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	dt{
		font-size:14px;
		font-family:"微软雅黑";
		font-weight:bold;
		border-bottom:1px dotted #000;
		padding:5px 0 5px 5px;
		margin:5px 0;
	}
	dd{
		padding:5px 0 0 5px;
	}
	li{
		line-height:28px;
	}
	#gymInfo{
		color: blue;
	}
	#gymInfo:hover{
		color: gold;
		cursor: pointer;
	}
	.gym-info-content{
		width:29%;
		float:left;
		color:blue;
		font-weight:800;
		text-align: center;
	}
	.navbar-brand {
		font-family: 'Tangerine', cursive;
		color:white;
		font-size: 100%;
	}
	.img-responsive {
		  display: inline-block;
		  height: auto;
		  max-width: 100%;
		}
	.gym-img-div{
		width: 48%;
		height:45%;
		float: left;
		margin: 3px; 
	
	}
	</style>
	<!-- 百度地图api -->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vlFc2R4e9kd3425rhMY40ZENc02HuD47"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
	</head>
<body style="background-image: url('../images/渐变背景1.png');background-size: cover">
	<!-- 顶部导航栏 -->
	<div class="layui-layout layui-layout-admin"  >
		<div class="layui-header header header-demo" summer>
			<div class="layui-main">
				<h1 style=""><a class="navbar-brand" href="../home.jsp" style="margin-left: 5%;margin-top: 20%">
					Yoga
					<!-- <img alt="" src="../images/LOGO-白色剪影.png" width="3%"> -->
				</a></h1>
				<ul class="layui-nav layui-layout-right" style="margin-right: 5%;">
				
				  <li class="layui-nav-item"><a href="/home.jsp">主页</a></li>
				  
				  <li id="coach" class="layui-nav-item">
				    <a href="javascript:;">教练</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/myCoach.jsp">我的教练</a></dd>
				      <dd><a href="/vi_user_coach/viewCoach">附近教练</a></dd>
				    </dl>
				  </li>
				  <li id="student" class="layui-nav-item">
				    <a href="javascript:;">学员</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/myCoach.jsp">我的学员</a></dd>
				      <dd><a href="/viewStudent.jsp">附近学员</a></dd>
				    </dl>
				  </li>
				 <li class="layui-nav-item">
				    <a href="javascript:;">场馆</a>
				    <dl class="layui-nav-child">
				      <dd><a href="#">附近场馆</a></dd>
				    </dl>
				  </li>
				  <li class="layui-nav-item">
				    <a href="javascript:;">通知</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/html/attentionDynamics.html">关注动态</a></dd>
				      <dd><a href="/html/sessionInfo.html">会话</a></dd>
				      <dd id="myRemindList"><a href="/html/myRemindList.html">签约通知</a></dd>
				      
				      <!-- 留言功能未实现 -->
				      <!-- <dd><a href="">留言查看</a></dd> -->
				    </dl>
				  </li>
				  <li class="layui-nav-item">
				    <a href="javascript:;">我</a>
				    <dl class="layui-nav-child">
				      <dd><a href="/html/myFollowed.html">我的关注</a></dd>
				      <dd><a href="/html/myFriend.html">我的好友</a></dd>
				      <dd><a th:href="@{'/userAction/findUserByUid?uid='+${session.uid}}">我的钱包</a></dd>
				      <dd id="myOrder"></dd>
				      <dd id="myInfo"></dd>
				      <dd><a href="/logout">退出登录</a></dd>
				    </dl>
				  </li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="layui-container">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 			<legend>搜索瑜伽馆</legend>
		</fieldset>
		<form id="searchCoachCondition" class="layui-form">
			<div class="layui-form-item">
			    <label class="layui-form-label">场馆名称</label>
				<div class="layui-input-block" style="width: 250px;">
				   <input type="text" name="gname" lay-verify="gname" autocomplete="off" placeholder="热门：蜗牛瑜伽馆..." class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				    <div class="layui-input-block">
				      <button class="layui-btn" lay-submit lay-filter="searchGym">搜索</button>
				      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				    </div>
			  </div>
			  
		  </form>
	</div>
	
	<div class="layui-container">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 			<legend>附近的场馆</legend>
		</fieldset>
		<div>
			<div id="map"></div>
		</div>
	</div>
	<div id="gymInfo-image" ></div>
	
</body>
</html>
<script type="text/javascript" th:inline="javascript">
	$(document).ready(function() {
		searchAllGym();
		if([[${session.userRole}]] == "student") {
			// 我的订单
			$("#myOrder").html('<a href="/jsp/studentOrder.jsp">我的订单</a>');
			// 个人中心
			$("#myInfo").html('<a href="/html/studentBasic.html">个人中心</a>');
			$("#student").remove();
			$("#myRemindList").remove();
		}
		
		if([[${session.userRole}]] == "coach") {
			// 我的订单
			$("#myOrder").html('<a href="/jsp/coachOrder.jsp">我的订单</a>');
			// 个人中心
			$("#myInfo").html('<a href="/html/coachBasic.html">个人中心</a>');
			$("#coach").remove();
		}
	});
	
	var userAddr = [[${session.address}]];// document.getElementById("userAddress").value;
	if(userAddr == null) {
		alert("请先登录！");
		location.href="http://localhost:8080/";
	}
	
	// 百度地图API功能
	var map = new BMap.Map("map");
	// 创建地址解析器实例     
	var myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上，并调整地图视野    
	myGeo.getPoint(userAddr, function(point){      
	    if (point) {      
	        map.centerAndZoom(point, 16);
	        var icon = new BMap.Icon("../icon/红色定位.png",new BMap.Size(32, 32), {
			    offset: new BMap.Size(10, 25),
			    imageOffset: new BMap.Size(0, 0)
			  });
	        map.addOverlay(new BMap.Marker(point,{icon: icon}));
	    }      
	 }, 
	"成都市");
	map.enableScrollWheelZoom(true);
	
	var index = 0;
	var searchInfoWindow = null;
	function searchAllGym() {
		$.ajax({
			url:"/vi_user_gym/all",
			type:"get",
			success:function(data) {
				for (var i = 0; i < data.length; i++) {
					var uphone = null;
					if(data[i].uphone == 'unKnown') {
						uphone = '待完善';
					} else {
						uphone = data[i].uphone;
					}
				    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                        '<img src="../images/'+data[i].headImage+'" alt="没脸见人呐" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                        '地址：'+data[i].address+'<br/>电话：'+uphone+'<br/>简介：'+data[i].gintroduction+'<br/><div id="gymInfo" onclick="viewGymDetailed('+data[i].uid+')">查看详情>>></div>'+
                        '</div>';
					var add = data[i].address;
					// 解析地址，添加标注
					geocodeSearch(add,i,content,data[i].gname);
				}
				
			}
		});
	}
	//点击显示详细信息
	function viewGymDetailed(uid) {
		$.ajax({
			url:"/vi_user_gym/selectGymByUid",
			type:"post",
			data:{"uid":uid},
			success:function(res) {
				if(res.ggrade == 0) {
					var grade = '暂无评分';
				} else {
					var grade = res.ggrade;
				}
				
				var uphone = null;
				if(res.uphone == 'unKnown') {
					uphone = '待完善';
				} else {
					uphone = res.uphone;
				}
				
				// 查询该场馆的所有图片
				$.ajax({
					url:"/gym_image/findImagesByGid",
					type:"post",
					data:{"gid":res.gid},
					success:function(data) {
						
						var content = '<div>' + 
			  			'<div style="width:42%;height:250px;float:right;border-left:solid darkgray 1px" >';
						for (var i = 0; i < data.length; i++) {
							
							content += '<div class="gym-img-div" style="background-image: url(\'../images/'+data[i].gymImgPath+'\');background-size: cover"></div>';
						}
						content +='</div>'+
		              	'<div style="width:58%;">'+
			                '<div><div class="gym-info-content">场馆名称</div><div style="width:70%;float:right;">'+res.gname+'</div></div><br/><br/>'+
			                '<div><div class="gym-info-content">场馆评分</div><div style="width:70%;float:right;">'+grade+'</div></div><br/><br/>'+
			                '<div><div class="gym-info-content">简介</div><div style="width:70%;float:right;">'+res.gintroduction+'</div></div><br/><br/>'+
			                '<div><div class="gym-info-content">电话</div><div style="width:70%;float:right;">'+uphone+'</div></div><br/><br/>';
			            if(res.umail != 'unKnown') {
			            	content += '<div><div class="gym-info-content">邮箱</div><div style="width:70%;float:right;">'+res.umail+'</div></div><br/><br/>';
			            }   
			                
			            content +='<div><div class="gym-info-content">地址</div><div style="width:70%;float:right;">'+res.address+'</div></div><br/><br/>'+
			            '<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="contact">联系场馆</button>'+ // 此处应根据当前登录的账户的类型显示不同的按钮 学员 联系场馆 教练 签约 
			            '<button type="button" class="layui-btn layui-btn-normal layui-btn-radius"style="margin-left:50px">给TA留言</button>'+
			            '</div>'+
		                '</div>';
		                
						var obj={
						           type:"layerFadeIn",
						           title:res.nickName,
						           close:"true",
						           content:content,
						           area:["800px","auto"],
						       };
						 method.msg_layer(obj);
						 
						// 发起会话
						 $(document).on("click","#contact",function() {
							 location.href="/chat/chatWindow?currentUid=3&talkerUid="+uid;
						});	
					}
				});	
				
			}
			
		});
	}
	
	// 地址解析
	function geocodeSearch(add,index,content,gname){
		myGeo.getPoint(add, function(point){
			if (point) {
				var address = new BMap.Point(point.lng, point.lat);
				addMarker(address,index,content,gname);//new BMap.Label(add,{offset:new BMap.Size(20,-10)})
			}
		}, "成都市");
	}
	
	// 编写自定义函数,创建标注
	function addMarker(point,index,content,gname){
		// 判断条目数超过11 全部更换为没有字母的标注
		if(index < 11) {
			var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
			    offset: new BMap.Size(10, 25),
			    imageOffset: new BMap.Size(0, 0 - index * 25)
			  });
		} else {
			var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
			    offset: new BMap.Size(10, 25),
			    imageOffset: new BMap.Size(0, 0 - 11 * 25)
			  });
		}
		
		var marker = new BMap.Marker(point,{icon: myIcon});
		// 标注绑定点击事件
		 marker.addEventListener("click", function(e){
			
			//创建检索信息窗口对象
			searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
					title  : gname,      //标题
					width  : 290,             //宽度
					height : 105,              //高度
					panel  : "panel",         //检索结果面板
					enableAutoPan : true,     //自动平移
					searchTypes : [
						//BMAPLIB_TAB_SEARCH,   //周边检索
						BMAPLIB_TAB_TO_HERE,  //到这里去
						BMAPLIB_TAB_FROM_HERE //从这里出发
					]
				});
		    searchInfoWindow.open(marker);
	    });
		map.addOverlay(marker);
		//marker.setLabel(label);
	}
	
	layui.use(['form', 'layedit','layer','element','carousel'], function(){
		  var form = layui.form //只有执行了这一步，部分表单元素才会自动修饰成功
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,element = layui.element //导航的hover效果、二级菜单等功能，需要依赖element模块
		  ,carousel = layui.carousel;
		  
		  form.on('submit(searchGym)', function(data){
			   $.ajax({
				   url:"/vi_user_gym/searchGym",
				   type:"post",
				   data:data.field,        
	               //dataType:'JSON', 
	               success:function(res) {
	            	   if (res != null && res.length != 0) {
	            		   // 清除地图上的所有标注
	            		   map.clearOverlays();
	            		   // 添加自己的位置标注
	            			myGeo.getPoint(userAddr, function(point){      
	            			    if (point) {      
	            			        map.centerAndZoom(point, 16);
	            			        var icon = new BMap.Icon("../icon/红色定位.png",new BMap.Size(32, 32), {
	            					    offset: new BMap.Size(10, 25),
	            					    imageOffset: new BMap.Size(0, 0)
	            					  });
	            			        map.addOverlay(new BMap.Marker(point,{icon: icon}));
	            			    }      
	            			 }, 
	            			"成都市");
	            		   // 将搜索出的场馆的地址添加到地图上
	            		    //var searchInfoWindow = null;
	            		   for (var i = 0; i < res.length; i++) {
	            			    var uphone = null;
		       					if(res[i].uphone == 'unKnown') {
		       						uphone = '待完善';
		       					} else {
		       						uphone = res[i].uphone;
		       					}
	            			   var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
	                           		'<img src="../images/'+res[i].headImage+'" alt="没脸见人呐" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
	                           		'地址：'+res[i].address+'<br/>电话：'+uphone+'<br/>简介：'+res[i].gintroduction+'<br/><div id="gymInfo" onclick="viewGymDetailed('+res[i].uid+')">查看详情>>></div>'+
	                        		'</div>';
	            			   var searchAddress = res[i].address;
	            			// 解析地址，添加标注
	            			   geocodeSearch(searchAddress,i,content,res[i].cname);
	            		   }
	            		   
	            		} else {
	            		 layer.msg('亲！找不到你想要的瑜伽馆哦！')
	            		}
	               }
			   });
			   return false;
		  });
		  
		  //但是，如果你的HTML是动态生成的，自动渲染就会失效
		  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
		  form.render();
		}); 
</script>


 